<template>
  <div class="module-layout">
    <je-panel v-bind="options">
      <template #top>
        <source-head @selectTableData="selectTableData" @reloadViewRelevan="reloadViewRelevan" />
      </template>
      <template #default>
        <source-view-main
          :source-data="sourceData"
          :table-data="tableData"
          :reload-relevan="reloadRelevan"
        />
      </template>
    </je-panel>
  </div>
</template>

<script>
  import { defineComponent, reactive, toRefs, onMounted, inject, toRaw } from 'vue';
  import SourceHead from '@/views/data-source/common/source-head.vue';
  import SourceViewMain from '@/views/data-source/source-view/components/source-view-main.vue';
  import { Panel } from '@jecloud/ui';
  import { useSourceStore } from '@/store/source-store';
  import { SOURCE_DATA_LABEL } from '@/helper/constant';
  export default defineComponent({
    name: 'SourceView',
    components: {
      JePanel: Panel,
      SourceHead,
      SourceViewMain,
    },
    setup() {
      const sourceStore = useSourceStore(); //数据源全局状态
      const state = reactive({
        options: {
          top: { size: 40, split: false },
        },
        sourceData: toRaw(inject(SOURCE_DATA_LABEL)), //获取当前数据
        tableData: [], //视图设计引入资源表
        reloadRelevan: false, //重新load关联设计
      });
      const methods = {
        //图形类型数据源选择的资源表
        selectTableData(tableData) {
          state.tableData = tableData;
        },
        //初始化图形视图选择的资源表
        initDesignView() {
          const curSourceCode = sourceStore.getSourceCode();
          const curSourceData = sourceStore.getSourceDataByCode(curSourceCode);
          if (curSourceData.DATASOURCE_BASE_TABLE) {
            state.designTableDatas = JSON.parse(curSourceData.DATASOURCE_BASE_TABLE);
            state.designTableDatas.forEach((item) => {
              let selectData = {
                tableCode: item.tableCode,
                tableId: item.tableId,
                tableName: item.tableName,
                value: item.tableCode,
                label: item.tableName,
              };
              state.concernDatas.selectDatas.push(selectData);
            });
          }
        },
        //开始进行重新load关联设计
        reloadViewRelevan() {
          state.reloadRelevan = true;
          setTimeout(() => {
            state.reloadRelevan = false;
          }, 500);
        },
      };
      onMounted(() => {});
      return {
        ...toRefs(state),
        ...methods,
      };
    },
  });
</script>
<style scoped lang="less">
  .module-layout {
    width: 100%;
    height: 100%;
  }
</style>
